import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Tag } from 'antd';
import './css/ProductCenter.css';

const ProductCenter: React.FC = () => {
  const [activeTab, setActiveTab] = useState('platform');

  const tabs = [
    { key: 'platform', label: '平台概览' },
    { key: 'capability', label: '测试能力' },
    { key: 'cases', label: '应用案例' }
  ];

  const renderTabContent = () => {
    switch (activeTab) {
      case 'platform':
        return (
          <div className="product-content-section">
            <h3 className="feature-title">核心功能特性</h3>
            <Row gutter={[24, 24]} className="feature-grid">
              <Col xs={24} sm={12} lg={6}>
                <Card 
                  title="🔄 灵活架构" 
                  bordered={false}
                  className="feature-card"
                >
                  <p>支持Web/Windows双客户端，可随时随地远程访问</p>
                  <div className="card-footer">
                    <span className="learn-more">了解更多</span>
                  </div>
                </Card>
              </Col>
              <Col xs={24} sm={12} lg={6}>
                <Card 
                  title="🚀 远程执行" 
                  bordered={false}
                  className="feature-card"
                >
                  <p>可同时对多台架进行集中测试与实时监控，高效省力</p>
                  <div className="card-footer">
                    <span className="learn-more">了解更多</span>
                  </div>
                </Card>
              </Col>
              <Col xs={24} sm={12} lg={6}>
                <Card 
                  title="☁️ 脚本云同步" 
                  bordered={false}
                  className="feature-card"
                >
                  <p>实现团队脚本共享与版本一致，便捷协作</p>
                  <div className="card-footer">
                    <span className="learn-more">了解更多</span>
                  </div>
                </Card>
              </Col>
              <Col xs={24} sm={12} lg={6}>
                <Card 
                  title="📊 全面覆盖" 
                  bordered={false}
                  className="feature-card"
                >
                  <p>深度支持IVI系统测试，覆盖90%以上用例</p>
                  <div className="card-footer">
                    <span className="learn-more">了解更多</span>
                  </div>
                </Card>
              </Col>
            </Row>
          </div>
        );
      case 'capability':
        return (
          <div className="product-content-section">
            <div className="capability-hero">
              <h3>专业测试解决方案</h3>
              <p>从零部件到整车的全周期测试服务，确保系统稳定可靠</p>
              <Row gutter={24} className="capability-stats">
                <Col span={8}>
                  <Statistic title="测试用例覆盖率" value={90} suffix="%" />
                </Col>
                <Col span={8}>
                  <Statistic title="测试效率提升" value={60} suffix="%" />
                </Col>
                <Col span={8}>
                  <Statistic title="支持设备类型" value={50} suffix="+" />
                </Col>
              </Row>
            </div>

            <Row gutter={[16, 16]} className="capability-features">
              {[
                "IVI系统测试",
                "ADAS测试",
                "BMS测试",
                "TBOX测试",
                "功能安全测试",
                "性能压力测试"
              ].map((feature, index) => (
                <Col key={index} xs={24} sm={12} md={8}>
                  <Card className="capability-feature">
                    <p>{feature}</p>
                  </Card>
                </Col>
              ))}
            </Row>
          </div>
        );
      case 'cases':
        return (
          <div className="product-content-section">
            <div className="cases-intro">
              <h3>成功应用案例</h3>
              <p>我们的测试平台已在多个项目中得到验证</p>
            </div>

            <Row gutter={[24, 24]} className="case-showcase">
              {[
                {
                  name: "智能座舱测试",
                  description: "完整覆盖IVI系统功能测试",
                  tech: ["自动化测试", "多设备并行", "实时监控"]
                },
                {
                  name: "ADAS系统验证",
                  description: "高级驾驶辅助系统全面测试",
                  tech: ["场景模拟", "传感器测试", "功能安全"]
                },
                {
                  name: "BMS测试平台",
                  description: "电池管理系统自动化测试",
                  tech: ["CAN通信", "参数配置", "异常模拟"]
                },
                {
                  name: "TBOX云测试",
                  description: "远程车联网终端测试方案",
                  tech: ["云平台", "OTA测试", "协议分析"]
                }
              ].map((project, index) => (
                <Col key={index} xs={24} sm={12} lg={6}>
                  <Card 
                    title={project.name} 
                    bordered={false}
                    className="case-card"
                    extra={<Tag color="green">已验证</Tag>}
                  >
                    <p>{project.description}</p>
                    <div className="tech-tags">
                      {project.tech.map((tech, i) => (
                        <Tag key={i} color="blue">{tech}</Tag>
                      ))}
                    </div>
                  </Card>
                </Col>
              ))}
            </Row>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <section className="page product-page">
      <div className="product-background-overlay"></div>
      <div className="page-content">
        <h2 className="product-main-title">产品内容</h2>
        <p className="product-subtitle">创新驱动 · 专业赋能 · 品质保证</p>
        
        <div className="custom-tabs-container">
          <div className="custom-tabs-nav">
            {tabs.map(tab => (
              <button
                key={tab.key}
                className={`custom-tab-button ${activeTab === tab.key ? 'active' : ''}`}
                onClick={() => setActiveTab(tab.key)}
              >
                {tab.label}
              </button>
            ))}
          </div>
          <div className="custom-tabs-content">
            {renderTabContent()}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProductCenter;